<template>
  <div id="playTime"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表
    setEcharts() {
      this.myChart = this.$echarts.init(document.getElementById("playTime"));
      let xData = ["1", "2", "3", "4"];
      let yData = [14350, 298, 5037, 239];
      let yData1 = [1350, 2918, 537, 2239];
      let option = {
        // backgroundColor: "#061326",
        grid: {
          top: "25%",
          left: "-10%",
          // left: "0%",
          bottom: "0%",
          right: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          // trigger: "axis",
          backgroundColor: "#00000080",
          // axisPointer: {
          //   type: "cross",
          // },
          textStyle: {
            fontSize: 12, // 字体大小
            color: "#fff",
          },
        },
        animation: false,
        xAxis: [
          {
            type: "category",
            data: xData,
            name:'季度',
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,

            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              margin: 30,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0c2c5a",
                color: "#fff",

              },
            },
            axisLine: {
              show: false,
            },
          },
          // {
          //   show: false,
          //   type: "value",
          //   axisLabel: {
          //     textStyle: {
          //       color: "#fff",
          //     },
          //   },
          //   splitLine: {
          //     lineStyle: {
          //       color: "#0c2c5a",
          //       color: "#fff",

          //     },
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          // },
        ],
        series: [
          {
            name: "本月",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 15,
                fontWeight: "bold",
                color: "#34DCFF",
              },
            },
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "本月",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "本月",
            type: "pictorialBar",
            symbolSize: [50, 15],
            symbolOffset: [0, 12],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderType: "solid",
                borderWidth: 1,
              },
            },
            data: yData,
          },
          {
            name: "本月",
            type: "pictorialBar",
            symbolSize: [70, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#19465D",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: yData,
          },
          {
            type: "bar",
            //silent: true,
            barWidth: "40",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#38B2E6",
                  },
                  {
                    offset: 1,
                    color: "#33CCFF",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
          {
            name: "上月",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 15,
                fontWeight: "bold",
                color: "#34DCFF",
              },
            },
            color: "#2DB1EF",
            data: yData1,
          },
          {
            name: "上月",

            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            color: "#2DB1EF",
            data: yData,
          },
          {
            name: "上月",

            type: "pictorialBar",
            symbolSize: [50, 15],
            symbolOffset: [0, 12],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderType: "solid",
                borderWidth: 1,
              },
            },
            data: yData,
          },
          {
            name: "上月",
            type: "pictorialBar",
            symbolSize: [70, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#19465D",
                borderType: "solid",
                borderWidth: 2,
              },
            },
            data: yData,
          },
          {
            type: "bar",
            //silent: true,
            barWidth: "40",
            barGap: "30%", // Make series be overlap
            barCateGoryGap: "30%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#38B2E6",
                  },
                  {
                    offset: 1,
                    color: "#33CCFF",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: yData,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>

<style scoped lang="less">
#playTime {
  display: flex;
  width: 370px;
  height: 170px;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
  // background: rgba(0, 0, 0, .6)
}
</style>
